/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState } from 'react';
import { ModalForm } from '@ant-design/pro-form';
import {
  ProFormSelect,
  ProFormRadio,
  ProFormTextArea,
  ProFormText,
  ProFormDependency,
} from '@ant-design/pro-form';
import { getBrandList } from '@/services/jdk/shield';
import KbAddressSelect from '@/components/KbAddressSelect';
import formatAddress from '@/components/KbAddressSelect/utils';
import { handleSearch } from '../../utils';
import { addressType, limitType, shieldType } from '../../utils/config';
import type { SHIELE_COLUMNS } from '../../..';
import { Button, Form } from 'antd';
import styles from './index.less';

interface KbModal {
  visible: boolean;
  record: SHIELE_COLUMNS;
  onClose: () => void;
  onSubmit: (values: any) => Promise<void>;
}
const Index = ({ visible, record, onClose, onSubmit }: KbModal) => {
  const [addressOption, setAddressOption] = useState<{ label: string; value: string }[]>([]);

  useEffect(() => {
    const { area_name_list, area_code_list } = record;
    setAddressOption(formatAddress(area_name_list, area_code_list));
  }, [record]);
  return (
    <ModalForm
      className={styles.deliveryModal}
      title={!record.area ? '屏蔽运力' : '修改屏蔽'}
      width={700}
      layout='horizontal'
      modalProps={{
        onCancel: onClose,
        destroyOnClose: true,
      }}
      labelCol={{
        span: 5,
      }}
      submitter={false}
      requiredMark={false}
      visible={visible}
      onFinish={onSubmit}
      initialValues={{
        limit_type: 1,
        select_type: 1,
        ...record,
      }}
    >
      {!record.area && (
        <>
          <ProFormSelect
            label='请选择屏蔽运力'
            name='brand'
            style={{ margin: '0' }}
            fieldProps={{
              allowClear: false,
            }}
            request={getBrandList}
            rules={[{ required: true, message: '请选择屏蔽运力' }]}
          />
          <ProFormRadio.Group
            label='请选择运力类型'
            name='limit_type'
            options={limitType}
            rules={[{ required: true, message: '请选择运力类型' }]}
          />
          <ProFormRadio.Group label='选择屏蔽类型' name='select_type' options={shieldType()} />
        </>
      )}
      <ProFormDependency name={['select_type']}>
        {({ select_type }) => {
          return select_type == 2 ? (
            <Form.Item label='请选择屏蔽区域'>
              <ProFormRadio.Group
                name='type'
                options={addressType}
                rules={[{ required: true, message: '请选择屏蔽区域' }]}
              />
              <ProFormDependency name={['type']}>
                {({ type }) =>
                  type == 3 ? (
                    <Form.Item
                      name='area'
                      colon={false}
                      rules={[{ required: true, message: '请输入区域信息' }]}
                    >
                      <KbAddressSelect
                        multiple
                        level={2}
                        allowClear={false}
                        placeholder='请选择区域信息'
                        defaultOptions={addressOption}
                      />
                    </Form.Item>
                  ) : null
                }
              </ProFormDependency>
            </Form.Item>
          ) : select_type == 1 ? (
            <ProFormSelect
              showSearch
              label=' '
              name='league_id'
              colon={false}
              placeholder='请选择服务商账号'
              rules={[{ required: true, message: '请选择服务商账号' }]}
              request={handleSearch}
              debounceTime={300}
              fieldProps={{
                defaultActiveFirstOption: false,
                showArrow: false,
                filterOption: false,
              }}
            />
          ) : null;
        }}
      </ProFormDependency>

      {!record.area && (
        <ProFormTextArea
          label='屏蔽原因'
          name='remark'
          fieldProps={{
            rows: 4,
            maxLength: 20,
          }}
          placeholder='请输入原因20个字以内，原因会展示给用户，请使用专业术语描述'
          rules={[{ required: true, message: '请输入屏蔽原因' }]}
        />
      )}
      <ProFormText readonly label=' ' colon={false}>
        {!record.area
          ? '注：设置后该区域的发单店铺在发单时，平台运力中不会显示该运力'
          : '可对区域进行编辑，新增或者移除'}
      </ProFormText>
      <Form.Item label=' ' colon={false}>
        <Button htmlType='submit' type='primary'>
          保存
        </Button>
      </Form.Item>
    </ModalForm>
  );
};

export default Index;
